<template>
	<view>
		<!-- 导航栏 -->
		<uniNavBar :border="false" :statusBar="true" :fixed="true">
			<view class="flex align-center w-100 justify-center font-weight-bold">
				<view 
				class="mx-1"
				v-for="(item,index) in tabBar"
				:key="index"
				:class="index === tabIndex ? 'font-lg text-main' : 'font-md text-light-muted'"
				@click="changeTab(index)"
				>
					{{item.name}}
				</view>
			</view>
			<text 
			slot='right' 
			class="iconfont icon-fatie_icon"
			@click="openAddInput"
			></text>
		</uniNavBar>
		<!-- 动态页内容 -->
		<swiper
		:duration="150"
		:style="'height:' +scrollH+'px'"
		@change="onChange"
		:current="tabIndex"
		>
			<!-- 关注 -->
			<swiper-item>
				<scroll-view 
				scroll-y="true" 
				:style="'height:' +scrollH+'px'"
				@scrolltolower="loadMoreEvent"
				>
					<block v-for="(item,index) in list" :key="index">
						<commonList 
						:item="item" 
						:index="index"
						@doSupport='changeSupport'
						></commonList>
						<divider></divider>
					</block>
					<loadmore :loadmore='loadmore'></loadmore>
				</scroll-view>
			</swiper-item>
			<!-- 话题 -->
			<swiper-item>
				<scroll-view 
				scroll-y="true" 
				:style="'height:' +scrollH+'px'"
				>
					<!-- 热门分类 -->
					<hotCate :hotList='hotList'></hotCate>
					<!-- 搜索框 -->
					<view class="p-2">
						<view class="flex align-center justify-center bg-light rounded" 
						style="width: 720rpx;height: 85rpx;" @click="open">
							<text class="iconfont icon-sousuo mr-2"></text>
							搜索话题
						</view>
					</view>
					<!-- 轮播图 -->
					<swiper 
					class="px-2 pb-2" 
					:indicator-dots="true" 
					:autoplay="true" 
					:interval="3000" 
					:duration="1000"
					indicator-color="white"
					indicator-active-color='grey'>
					<block v-for="(item,index) in swiperList" :key='index'>
						<swiper-item class="rounded">
							<image 
							:src="item.src" 
							class="w-100" 
							style="height:300rpx;"
							>
							</image>
						</swiper-item>
					</block>
					</swiper>
					<divider></divider>
					<!-- 最近更新 -->
					<view class="p-2 font-md">最近更新</view>
					<!-- 话题部分 -->
					<block v-for="(item,index) in topicList" :key="index">
						<topicList :item='item' :key='index'></topicList>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	let demo = [{
					username:'昵称',
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:true,
					title:"正文标题1",
					titlepic:"/static/demo/datapic/11.jpg",
					support:{
						type:'support',
						support_count:1,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				},{
					username:'昵称',
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:true,
					title:"正文标题2",
					titlepic:"",
					support:{
						type:'unsupport',
						support_count:2,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				},{
					username:'昵称', 
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:true,
					title:"正文标题3",
					titlepic:"",
					support:{
						type:'',
						support_count:1,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				},{
					username:'昵称', 
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:true,
					title:"正文标题3",
					titlepic:"",
					support:{
						type:'',
						support_count:1,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				}];
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	import commonList from '@/components/common/common-list.vue';
	import divider from '@/components/common/divider.vue';
	import loadmore from '@/components/common/loadmore.vue';
	import hotCate from '@/components/news/hotCate.vue';
	import topicList from '@/components/news/topicList.vue';
	export default {
		components:{uniNavBar,commonList,loadmore,hotCate,topicList},
		data() {
			return {
				tabIndex:0,
				tabBar:[
					{name:'关注'},{name:'话题'}
				],
				scrollH: 500,
				list:[],
				// 上拉加载更多... 加载中... 没有了...
				loadmore:'上拉加载更多...',
				// 热门分类
				hotList:[],
				// 话题
				topicList:[],
				// 轮播图
				swiperList: []
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - res.statusBarHeight - 44
				}
			}),
			this.list = demo
			this.getTopicNav()
			this.getHotTopic()
			this.getSwipers()
		},
		methods: {
			// 获取热门分类
			getTopicNav() {
				this.$H.get('/topicclass').then(res => {
					this.hotList = res.list.map(item => {
						return {
							id: item.id,
							name: item.classname
						}
					})
				})
			},
			// 获取热门话题
			getHotTopic() {
				this.$H.get('/hottopic').then(res => {
					this.topicList = res.list.map(item => {
						return {
							id:item.id,
							cover:item.titlepic,
							title:item.title,
							desc:item.desc,
							today_count:item.todaypost_count,
							news_count:item.post_count
						}
					})
				})
			},
			// 获取热门分类
			getSwipers() {
				this.$H.get('/adsense/0').then(res => {
					this.swiperList = res.list
				})
			},
			open() {
				uni.navigateTo({
					url:'../search/search?type=topic'
				})
			},
			// 监听滑动页面 导航栏跟随页面滑动变化
			onChange(e) {
				this.tabIndex = e.detail.current
			},
			changeTab(index) {
				this.tabIndex = index
			},
			openAddInput() {
				uni.navigateTo({
					url:"../addInput/addInput"
				})
			},
			// 顶/踩操作
			changeSupport(e){
				let item = this.list[e.index]
				let msg = e.type === 'support' ? '顶 + 1' : '踩 + 1'
				if (item.support.type === '') {
					item.support[e.type + '_count'] ++
				} else if (item.support.type === 'support' && e.type === 'unsupport') {
					item.support.support_count --
					item.support.unsupport_count ++
				} else if (item.support.type === 'unsupport' && e.type === 'support') {
					item.support.support_count ++
					item.support.unsupport_count --
				}
				item.support.type = e.type
				uni.showToast({
					title:msg
				})
			},
			// 上拉加载更多
			loadMoreEvent() {
				if (this.loadmore !== '上拉加载更多...') return
				this.loadmore = '加载中...'
				setTimeout(() => {
					this.list = [...this.list, ...this.list]
					this.loadmore = '上拉加载更多...'
				},1000)
			}
		}
	}
</script>

<style>

</style>
